<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="D:\代码\Code\三段\五月\jquery\jquery.js"></script>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr></tr>
      </thead>
      <tbody></tbody>
    </table>
    <button id="addTr">+</button>
  </body>
  <script>
    var tbodyObj = [
        [
          {
            val: '参数1',
          },
        ],
      ],
      n = 1
    $(function () {
      showHead()
      showTable()
      $('#addTr').click(function () {
        var num = tbodyObj[0].length,
          newArr = []
        for (let i = 0; i < num; i++) {
          newArr.push({
            val: '参数' + ++n,
          })
        }
        tbodyObj.push(newArr)
        showTable()
      })
    })
    function showHead() {
      var strHtml = '<th></th>'
      for (let i in tbodyObj[0]) {
        strHtml += `<th>参数值<button onclick="delTd(${i})">-</button></th>`
      }
      strHtml += `<th><button onclick="addTd()">+</button></th>`
      $('thead tr').html(strHtml)
    }
    function delTd(index) {
      for (let i in tbodyObj) {
        tbodyObj[i].splice(index, 1)
      }
      showHead()
      showTable()
    }
    function addTd() {
      for (let i in tbodyObj) {
        tbodyObj[i].push({
          val: '张三' + i,
        })
      }
      showHead()
      showTable()
    }
    function showTable() {
      var html = ''
      for (let i in tbodyObj) {
        html += `<tr>`
        for (let j in tbodyObj[i]) {
          html += `<td><input type="text" value="${tbodyObj[i][j].val}"> </td>`
        }
        html += `<td><button onclick="delTr(${i})">-</button></td>`
        html += `</tr>`
      }
      $('tbody').html(html)
    }
    function delTr(index) {
      tbodyObj.splice(index, 1)
      showTable()
    }
  </script>
</html>
